<template>
    <div>
        <div class="nav">
            <ul>
                <!-- <li v->短篇</li> -->
                <li v-for="item in navilist" :key="item.id">
                    <router-link :to="{ name: item.path, query: { type: item.type, uuid: item.uuid } }">{{ item.name }}</router-link>
                </li>
                <!-- <li><router-link to="/main/found/gratis">免费</router-link></li>
                <li><router-link to="/main/found/schoolboy">男生</router-link></li>
                <li><router-link to="/main/found/schoolgirl">女生</router-link></li>
                <li><router-link to="/main/found/publication">出版</router-link></li>
                <li><router-link to="/main/found/listenbook">听书</router-link></li> -->
                <li>短篇</li>
                <li>同人</li>
            </ul>
            <div class="right_box">
                <i></i>
                <router-link to="/classify">
                    <span>分类</span>
                </router-link>
            </div>
        </div>
    </div>
</template>

<script>
import { bookNavi } from "@/api/found";
export default {
    data() {
        return {
            navilist: [],
            routerlist: [
                {
                    name: "selected",
                },
                {
                    name: "gratis",
                },
                {
                    name: "schoolboy",
                },
                {
                    name: "schoolgirl",
                },
                {
                    name: "publication",
                },
                {
                    name: "listenbook",
                },
            ],
        };
    },
    methods: {
        getNavi() {
            let routerlist = this.routerlist;
            bookNavi({ gender: 1 }).then((res) => {
                // console.log(res);
                let data = res.data.navi;
                data.map((item, index) => {
                    let obj = {};
                    obj.id = item.id;
                    obj.name = item.name;
                    let arr = item.url.split(/&?[a-z\/\?\.]*=/);
                    obj.type = arr[1];
                    obj.uuid = arr[2];
                    obj.path = routerlist[index].name;
                    this.navilist.push(obj);
                });
                // console.log(this.navilist);
            });
        },
    },
    created() {
        this.getNavi();
    },
};
</script>

<style lang="scss" scoped>
.nav {
    width: 100%;
    height: 30px;
    // border: 1px solid #000;
    display: flex;
    align-items: center;

    ul {
        width: 75%;
        height: 100%;
        overflow-x: scroll;
        display: flex;
    }
    ul::-webkit-scrollbar {
        display: none;
    }
    li,
    a {
        height: 100%;
        line-height: 30px;
        margin-right: 15px;
        font-size: 14px;
        color: #999;
        flex-shrink: 0;
        padding-bottom: 3px;
        border-bottom: 3px solid transparent;
        box-sizing: border-box;

        &:last-child {
            margin-right: 0px;
        }
    }
    .router-link-exact-active,
    .router-link-active {
        color: #313131;
        font-weight: 600;
        border-color: #313131;
    }
    .right_box {
        // border-left: 1px solid #999;
        width: 25%;
        height: 20px;
        display: flex;
        align-items: center;

        a {
            width: 45%;
            height: 20px;
            line-height: 20px;
            text-align: right;
            border-left: 1px solid #999;
        }
        span {
            font-size: 14px;
            color: #313131;
        }
    }
    i {
        width: 20px;
        margin: 0 auto;
        display: inline-block;
        height: 20px;
        // background: #000;
        background-image: url(@/assets/xian.png);
        background-repeat: no-repeat;
        background-size: 100%;
    }
}
</style>
